// 获取操作对象
var xqsp=document.querySelector(".xqsp")
var sqzs=document.querySelector(".xy")
var subnam=document.querySelector(".subnam")
var spxx=document.querySelector(".spxx")
//创建变量，接收获取的商品信息
var arr
//创建变量，存放该商品的购买数量
var num=1
// 获取地址栏中的参数
var search1=location.search
// 判断地址栏中是否有参数信息
if(!search1){
    alert("非法进入")
    location="./spzs.html"
}else{
    // 获取参数信息
    var id=search1.split('=')[1];
    //以id来获取对应的商品信息
    (async function(){
        var tex=await promiseAjax({
            url:'../php/xqy.php',
            datatype:'id='+id
        })
        // 把字符串转换为对象
        arr=eval('('+tex+')')
        // 创建字符串，拼接要显示的内容
        var str2=`
                    <a href="./soye.html">首页></a>
                    <a href="#">商品展示></a>
                    <a href="#">${arr.goods_bianhao}</a>  
        `
        var str=`
            <div class="box">
                 <div class="box-left">
                    <img src="${arr.goods_spzp}">
                    <div class="mark"></div>
                </div>
                <div class="box-right">
                    <img src="${arr.goods_spzp}">
                </div>
            </div>
                
                    <div class="spxx">
                        <p class="spxqxx">${arr.goods_name}</p>
                        <p class="spjg">
                            <span class="scj">市场价：<span>¥</span><span>${arr.goods_scprice}</span></span>
                            <span class="huoh">商品货号：<span>${arr.goods_bianhao}</span></span>
                        </p>
                        <p class="sp_jg">
                            商品价格：<span class="fh">￥</span><span class="spsjg">${arr.goods_price}</span>
                        </p>
                        <div class="spnum">
                            <span>数量：</span>
                            <button class="btn">-</button>
                            <button class="btn1">1</button>
                            <button class="btn">+</button>
                            <span>库存<span>${arr.goods_num}</span>件</span>
                        </div>
                        <div class="zs"><a href="./gwc.html">购买</a></div>
                    </div>
                    <div class="cnxh">
                        <p>猜你喜欢</p>
                        <div class="like2">
                        <a href="../index/xqy.html?id=4">
                            <img src="http://www.budoworld.cn/images/upload/s/49_s.jpg" alt="">
                        </a>
                        <p class="p2">¥249.00</p>
                    </div>
        
                    <div class="like2">
                        <a href="../index/xqy.html?id=3">
                            <img src="http://www.budoworld.cn/images/upload/s/48_s.jpg" alt="">
                        </a>
                        <p class="p2">¥249.00</p>
                    </div>
        
                    <div class="like2">
                        <a href="../index/xqy.html?id=2">
                            <img src="http://www.budoworld.cn/images/upload/s/47_s.jpg" alt="">
                        </a>
                        <p class="p2">¥249.00</p>
                    </div>
                    </div>
        
        `

        var str1=`
        <div class="xhdsp">
        
        <div class="sssp">
            <div class="sp">搜索店内商品</div>
            <div class="gjzz">
                <span class="gjz">关键字: <input type="text" placeholder="关键字"></span>
                <br>
                <span class="jg_jg">&nbsp;&nbsp;价&nbsp;格: <input type="text" placeholder="￥">&nbsp;&nbsp;-&nbsp;&nbsp;<input type="text" placeholder="￥"></span>
                <br>
                <p class="btu" ><a href="javascript:;">搜索</a></p>
            </div>
        </div>

        <div class="like">
            <p class="sp">你可能感兴趣的商品</p>
            <div class="like1">
                <a href="../index/xqy.html?id=4" >
                    <img src="http://www.budoworld.cn/images/upload/s/49_s.jpg" alt="">
                </a>
                <p class="p1">阿迪达斯adidas 圆领T恤ADITSG2P</p>
                <p class="p2">¥249.00</p>
            </div>

            <div class="like1">
                <a href="../index/xqy.html?id=3" >
                    <img src="http://www.budoworld.cn/images/upload/s/48_s.jpg" alt="">
                </a>
                <p class="p1">阿迪达斯adidas 圆领T恤ADICTJ</p>
                <p class="p2">¥249.00</p>
            </div>

            <div class="like1">
                <a href="../index/xqy.html?id=2" >
                    <img src="http://www.budoworld.cn/images/upload/s/47_s.jpg" alt="">
                </a>
                <p class="p1">阿迪达斯adidas 圆领T恤ADITSG5</p>
                <p class="p2">¥249.00</p>
            </div>

            <div class="like1">
                <a href="../index/xqy.html?id=1" >
                    <img src="http://www.budoworld.cn/images/upload/s/46_s.jpg" alt="">
                </a>
                <p class="p1">阿迪达斯adidas T恤</p>
                <p class="p2">¥249.00</p>
            </div>

        </div>
    </div>
    <div class="cpxq">
        <p class="sp">产品详情</p>
        <div class="likesp">
            <img src="${arr.goods_spzp}" alt="" width="800px">
            <img src="${arr.goods_xqzp2}" alt="" width="800px">
            <img src="${arr.goods_xqzp3}" alt="" width="800px">
            <img src="${arr.goods_xqzp4}" alt="" width="800px">
            <img src="${arr.goods_xqzp5}" alt="" width="800px">
        </div>
    </div>
        `
        // 渲染
        subnam.innerHTML=str2
        xqsp.innerHTML=str
        sqzs.innerHTML=str1

        //    搜索框
            sqzs.onclick=function fu1(e){
                // 关键字的input框内容
                var val1=0
                // 右边input框内容
                var val3=0
                // 左边inpu框内容
                var val2=0
                // 获取事件
                var e = e || window.event
                // 委托事件
                var target=e.target || e.srcElement
                // 搜索框
            if(target.innerHTML=="搜索"){
                // 获取搜索框的父元素节点
               var sear=target.parentNode.parentNode
             // 关键字的input框内容   
                val1=sear.children[0].lastChild.value
                // 右边input框内容
                val3=sear.children[2].children[0].value
                // 左边inpu框内容
                val2=sear.children[2].children[1].value
                // 向地址栏传参跳转到列表页
                location=`./spzs.html?key=${val1}&price1=${val3}&price2=${val2}`
            }
            }
            
         //给左边大盒子绑定鼠标移入移出事件
         $('.box-left').hover(function(){
            //显示蒙版层和右边大盒子
            $('.mark').css("display","block")
            $('.box-right').css("display",'block')
        },function(){
            //隐藏蒙版层和右边大盒子
            $('.mark').css("display","none")
            $('.box-right').css("display",'none')
        })
        //给左边大盒子对象绑定鼠标移动事件
        $('.box-left').mousemove(function(e){
            //获取当前蒙版层要移动的距离
            var left1=e.pageX-$('.box-left').offset().left-parseInt($('.mark').width()/2)
            var top1=e.pageY-$('.box-left').offset().top-parseInt($('.mark').height()/2)
            
            //设置蒙版层的边界条件
            var maxX=$('.box-left').width()-$(".mark").width()
            var maxY=$('.box-left').height()-$('.mark').height()
            //创建图片的移动距离
            var imgX,imgY

            //判断水平方向
            if(left1<=0){
                $('.mark').css("left","0px")
                imgX=0
            }else if(left1>=maxX){
                $('.mark').css('left',maxX+'px')
                imgX=maxX
            }else{
                $('.mark').css("left",left1+'px')
                imgX=left1
            }

            //判断垂直方向
            if(top1<=0){
                $('.mark').css("top","0px")
                imgY=0
            }else if(top1>=maxY){
                $('.mark').css("top",maxY+'px')
                imgY=maxY
            }else{
                $('.mark').css("top",top1+'px')
                imgY=top1
            }

            //让右边盒子中图片进行移动
            $('.box-right img').css('left',-1*imgX+'px')
            $('.box-right img').css("top",-1*imgY+'px')
        })
    })()    
}

xqsp.onclick=function(e){
    // 事件
    var e = e || window.event
    // 事件委托
    var target=e.target || e.srcElement
    // +按钮
    if(target.innerHTML=="+"){
        // 获取按钮前的input框的内容
        num=target.previousElementSibling.innerHTML
        // num数量++
        num++
        // 重新给+按钮前的输入框赋值
        target.previousElementSibling.innerHTML=num
    }
    // 减法按钮
    if(target.innerHTML=="-"){
        // 如果num大于1的时候才进入减法按钮
        if(num>1){
            // 获取减按钮前的input框的值
            num=target.nextElementSibling.innerHTML
            num--
            // 重新给减按钮前的input框的值赋值
            target.nextElementSibling.innerHTML=num
        }
    }
    // 购买
    if(target.innerHTML=="购买"){
        //获取当前登录账号
        var name1=getCookie('name')
        //判断账号是否存在
        if(name1){
            //获取当前用户的购物车商品信息
            var carts=localStorage.getItem(name1) || "[]"
            carts=eval('('+carts+')')
            // 如果carts的长度大于0
            if(carts.length>0){
                var bool=true
                carts.forEach(item=>{
                    if(item.goods_id==arr.goods_id){
                        bool=false
                        var num1=item.cart_number+num
                        if(num1<item.goods_num){
                            item.cart_number=num1
                        }else{
                            alert("你购买的商品已超过了库存，目前只有："+item.goods_num)
                            item.cart_number=parseInt(item.goods_num)
                        }
                        localStorage.setItem(name1,JSON.stringify(carts))
                    }
                })
                if(bool){
                    arr['cart_number']=num
                    carts.push(arr)
                    localStorage.setItem(name1,JSON.stringify(carts))
                }
               
            }else{
                arr['cart_number']=num
                carts.push(arr)
                localStorage.setItem(name1,JSON.stringify(carts))
            }
        }else{
            alert("你还未登录，请登录之后在购买")
            var oldUrl=location.href
            location='./denglu.html?url='+oldUrl
        }
    }
}







